<template>
  <div class="body">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item">
          <div class="tag">时间范围</div>
          <el-date-picker
            v-model="tableParams.time_interval"
            class="input"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            size="mini"
          />
        </div>

        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">地区 </div>
          <el-cascader
            v-model="region_city"
            size="mini"
            placeholder="请选择地区"
            class="inp"
            :props="{ checkStrictly: true }"
            :options="city_data_option"
            clearable
          />
        </div>

        <div class="tf_item">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="loadTableData"
          >搜索</el-button>
          <!-- <el-button
            class="btn_export"
            type="info"
            size="mini"
            @click="exportExcelFun()"
          >导出<i class="el-icon-download el-icon--right" /></el-button> -->

        </div>
      </div>

      <div class="table-card">
        <el-table
          id="table_id"
          v-loading="loading.table"
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          :border="true"
          size="mini"
        >
          <el-table-column label="时间" prop="date" width="100" align="center" />
          <el-table-column prop="province_name" label="省份" width="120" align="center" />
          <el-table-column prop="city_name" label="城市" width="120" align="center" />
          <el-table-column prop="clue_num" label="余量" width="120" align="center" />
          <el-table-column prop="" label="推送成功" width="120" align="center">
            <template v-if="'stage' in scope.row.clue_data" slot-scope="scope">
              <div>{{ scope.row.clue_data.stage.application_submitted }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="总表单数" width="120" align="center">
            <template v-if="'stage' in scope.row.clue_data" slot-scope="scope">
              <div>{{ scope.row.clue_data.stage.data_filled }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="" label="车" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.car.have }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="房" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.house.have }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="公积金" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.accumulation_fund.have }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="社保" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.social_security.have }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="营业执照" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.business_owner.have }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="芝麻分0~599" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.sesame_score['0,600'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="芝麻分600~649" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.sesame_score['600,649'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="芝麻分650~699" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.sesame_score['650,699'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="芝麻分700以上" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.sesame_score['700,max'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="无花呗额度" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.huabei_quota['none'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="花呗额度0-5000" width="120" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.huabei_quota['0,5000'] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="花呗额度5000以上" width="150" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.clue_data.huabei_quota['5000,max'] }}</div>
            </template>
          </el-table-column>

          <!-- <el-table-column label="申请时间" width="140">
            <template slot-scope="scope">
              <div>{{ scope.row.createtime }}</div>
            </template>
          </el-table-column> -->
        </el-table>

        <el-pagination
          v-if="!loading.table"
          :current-page="tableParams.page"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </div>

    <ClueDetail ref="clueDetailRef" />
  </div>
</template>

<script>
import { apiCityStat } from '@/api/apiCommon'
import { getTableText } from '@/utils/appUtil'
import { exportExcel } from '@/utils/htmlToExcelUtils'
import {
  getCity,
  trCity,
  initTableData,
  initPickerOptions
} from '@/utils/appUtil'
import {
  getDateDaysAgo,
  getStartOfDayTimestamp,
  formatTimestamp
} from '@/utils/datetimeUtil'
import ClueDetail from '@/components/business/ClueDetail.vue'

export default {
  name: 'CityStat',
  components: {
    ClueDetail
  },
  data() {
    return {
      tableParams: {
        page: 1,
        size: 30,
        time_interval: [getDateDaysAgo(), new Date()]
      },
      tableData: {},
      pickerOptions: {},
      loading: {
        dialog_create: false,
        table: false
      },

      region_city: [], // 省市区地址
      // 选项数据
      city_data_option: []
    }
  },
  created() {
    this.reqApiCity()
    this.pickerOptions = initPickerOptions()
  },
  methods: {
    // 获取表格里的展示文字
    getTableText,
    // 城市转换
    trCity,
    // 日期转换
    formatTimestamp,
    // 导出表格
    exportExcelFun() {
      exportExcel('线索')
    },
    // 列表请求
    loadTableData(is_initpage = true) {
      const _this = this
      console.log(_this.region_city)
      if (is_initpage) {
        _this.tableParams.page = 1
      }
      _this.loading_start('table')
      _this.tableData = initTableData()
      var tableParamsData = { ..._this.tableParams }

      var start_time = getStartOfDayTimestamp(
        tableParamsData['time_interval'][0]
      )
      var end_time =
        getStartOfDayTimestamp(tableParamsData['time_interval'][1]) + 86400

      delete tableParamsData['time_interval']
      tableParamsData['start_time'] = start_time
      tableParamsData['end_time'] = end_time

      // 省市区选择增加
      const province = _this.region_city[0] ? _this.region_city[0] : ''
      const city = _this.region_city[1] ? _this.region_city[1] : ''
      const district = _this.region_city[2] ? _this.region_city[2] : ''

      if (province) {
        tableParamsData.province = province
      }
      if (city) {
        tableParamsData.city = city
      }
      if (district) {
        tableParamsData.district = district
      }

      apiCityStat(tableParamsData)
        .then((response) => {
          const result = response
          var tableData = result.data.datalist
          _this.tableData = tableData
          _this.loading_end('table')
        })
        .catch(function(result) {
          _this.loading_end('table')
        })
    },

    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row['status'] == 'stop') {
        return 'discard-row'
      }
    },

    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val
      this.loadTableData(false)
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val
      this.loadTableData(false)
      // console.log(`当前页: ${val}`);
    },

    // 获取城市
    reqApiCity() {
      const _this = this
      _this.loading_start('table')
      getCity().then((response) => {
        _this.city_data_option = response
        _this.loading_end('table')
        _this.loadTableData()
      })
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true
          setTimeout(() => {
            this.loading[key] = false
          }, 5000)
        })
      } else {
        this.loading[keys] = true
        setTimeout(() => {
          this.loading[keys] = false
        }, 5000)
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.$nextTick(() => {
            this.loading[key] = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.loading[keys] = false
        })
      }
    }
  }
}
</script>

<style lang="scss">

</style>
